<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="../EXT4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
href="../css/style.css" />
<script type="text/javascript" src="../EXT4/ext-all.js"></script>
<script type="text/javascript" src="../script/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
var pageSize = 10;

window.onresize = function(){
    setTimeout(function(){panel.setWidth(Ext.getDom("siguplist").width);},100);
};

Ext.onReady(function() {
	Ext.QuickTips.init();
	Ext.define('Student', { 	
        extend: 'Ext.data.Model', 
        fields: ['id','displayName','englishName','school','createTime',
        'grade','age','mother','father','address','phone','emergency',
        'sex','oaSubjects','MMobile','MContactType','MContact','MWorking','MPosition'
        ,'FMobile','FContactType','FContact','FWorking',
        'FPosition','relationship','EPhone',{
        	name: 'birthDate',
        	convert: function(v, record) {
        		return v.substring(0,10);
        	}	
        },{
    		name: 'createTime',
    		convert: function(v, record) {
        		return v.substring(0,10);
			}
        
        }] 
    });
    
    
    var student_store = Ext.create('Ext.data.Store', {
		model: 'Student', 
		autoLoad: true,
		pageSize: pageSize,
		proxy: { 
	        type: 'ajax', 
	        url: '../service/student_allstu',
	        method: 'POST',
	        reader: { 
	            type: 'json', 
	            root: 'root',
	            total: 'total'
	        }
		}
	});
	
	var header = Ext.create('Ext.form.FieldSet',{
        title: '查询条件',
        collapsible: true,
        defaultType: 'textfield',
        layout: 'hbox',
        items :[{
            fieldLabel: '姓名:',
            id: 'query',
            labelWidth:30,
            width:200,
            margin:'0 10 0 0',
        }]
    })
	
	var content = Ext.create('Ext.grid.Panel',{
		store: student_store,
		tbar: [{
			xtype:'button',
			text:'查询',
			handler: function() {
				var query = Ext.getCmp('query').getValue();
				query = escape(query);
				student_store.loadPage(1,{ params:{'query':query} })
			}
		}],
		dockedItems: [{ 
	        xtype: 'pagingtoolbar', 
	        store: student_store,
	        dock: 'bottom', 
	        displayInfo: true 
         }],
		columns:[{
			text: '姓名',  dataIndex: 'displayName',width:'7%'
		},{
			text: '英文名',  dataIndex: 'englishName',width:'7%'
		},{
			text: '母亲',  dataIndex: 'mother',width:'7%',
			renderer : function(value, meta){
				return '<b>'+value+'</b>';
			},
			listeners:{
				dblclick: function(view, html, raw, col) {
					var student = view.getStore().getAt(raw).data;
				
					var detail = '';
					detail += '电话:'+ student.MMobile +'<br/>';
					detail += '工作:'+ student.MWorking +'<br/>';
					detail += '职位:'+ student.MPosition +'<br/>';
					detail += '联系方式:' +student.MContact;
					
					var tip = Ext.create('Ext.tip.ToolTip', {
						target: html,
						trackMouse: true,
						title: student.mother,
						title: '母亲',
					    html: detail
					});
					
					tip.show();
					
				}
			}
		},{
			text: '父亲',  dataIndex: 'father',width:'7%',
			renderer : function(value, meta){
				return '<b>'+value+'</b>';
			},
			listeners:{
				dblclick: function(view, html, raw, col) {
					var student = view.getStore().getAt(raw).data;
				
					var detail = '';
					detail += '电话:'+ student.FMobile +'<br/>';
					detail += '工作:'+ student.FWorking +'<br/>';
					detail += '职位:'+ student.FPosition +'<br/>';
					detail += '联系方式:' +student.FContact;
					
					var tip = Ext.create('Ext.tip.ToolTip', {
						target: html,
						trackMouse: true,
						title: student.father,
					    html: detail
					});
					
					tip.show();
					
				}
			}
		},{
			text: '学校',  dataIndex: 'school',width:'8%'
		},{
			text: '年级',  dataIndex: 'grade',width:'5%'
		},{
			text: '年龄',  dataIndex: 'age',width:'5%'
		},{
			text: '电话',  dataIndex: 'phone',width:'12%'
		},{
			text: '性别',  dataIndex: 'sex',width:'5%',
			renderer : function(value){
				if(value==1) return "男";
				if(value==0) return "女";
			}
		},{
			text: '报名时间',  dataIndex: 'createTime',width:'8%'
		},{
			text: '生日',  dataIndex: 'birthDate',width:'8%'
		},{
			text: '紧急联系人',  dataIndex: 'emergency',width:'7%',
			renderer : function(value, meta){
				return '<b>'+value+'</b>';
			},
			listeners:{
				dblclick: function(view, html, raw, col) {
					var student = view.getStore().getAt(raw).data;
				
					var detail = '';
					detail += '关系:'+ student.relationship +'<br/>';
					detail += '电话:'+ student.EPhone;
					
					var tip = Ext.create('Ext.tip.ToolTip', {
						target: html,
						trackMouse: true,
						title:student.emergency,
					    html: detail
					});
					
					tip.show();
					
				}
			}
		}]
	});
	
	panel=Ext.create('Ext.Panel', {
        id:'main-panel',
        baseCls:'x-plain',
        renderTo:'siguplist',
        items:[header,content]
	});
})	
</script>
</head>
<body>
	<div id="siguplist"></div>
</body>
</html>